import React, { Component } from 'react'
import {Card,Form, Input, Button ,message,Breadcrumb} from 'antd'
import wangEditor from "wangeditor"
import {addArt} from "@api"
//设置表单显示样式布局
const layout = {
  labelCol: {
    span:2,
  },
  wrapperCol: {
    span: 20,
  },
};
  export default class ArtAdd extends Component {
    constructor(){
      super();
      this.state={
        edit:null
      }
    }
    render() {
      return (
        <div>
           <Breadcrumb style={{color:"#000",fontSize:"20px",paddingBottom:"10px"}} separator=">">
              <Breadcrumb.Item href="/admin">主页</Breadcrumb.Item>
              <Breadcrumb.Item>文章添加</Breadcrumb.Item>
          </Breadcrumb>
          <Card>
          <Form {...layout} name="basic" onFinish={ this.submit }>
            <Form.Item
              name='title'
              label="标题"
              rules={[
                {
                  required: true,
                  message:"请输入标题"
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name='author'
              label="作者"
              rules={[
                {
                  required: true,
                  message:"请输入作者"
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name='desc'
              label="描述"
              rules={[
                {
                  required:true,
                  message:"请输入文章描述"
                },
              ]}
            >
              <Input.TextArea rows={6}/>
            </Form.Item>
            <Form.Item 
                name='content' 
                label="文章内容">
               <div id="txt"></div>
            </Form.Item>
            <Form.Item wrapperCol={ { offset:10,span:14 } }>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </Form.Item>
          </Form>
          </Card> 
        </div>
      )
    }
    componentDidMount(){
      // 加载富文本
      this.setState({
        edit: new wangEditor("#txt")
      },()=>{
        this.state.edit.create()
      })
    }
    submit=(params)=>{
      //解析content,解析成div标签包裹的dom结构
       params.content=this.state.edit.txt.html()
       params.count=0
       params.createAt=Date.now()
       addArt(params).then(res=>{
         message.success(res.data.msg,1,()=>{
           this.props.history.go(0)
         })
       })
    }
  }
